<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
    <script src="../lib/jquery.js"></script>
</head>
<style>
    .box1{
          width:60%;
          border:1px solid darkorchid;
          border-radius: 10px;
          padding:20px;
        }

        .router-link-exact-active,  .router-link-active{
          color:deeppink;
          border:1px solid deepskyblue;
          padding:5px;
          border-radius: 5px;
          background: darkslateblue;
          list-style: none;
        }
</style>
<body>

    <div id="app">
        <h1>{{title}}</h1>
        <!-- 5设置路由出口，加载路由组件的地方 -->
        <router-view class="box1"></router-view>
        <!-- 对象是个变量所以要用{}包起来 -->
        <router-link :to="{name:'home'}">首页</router-link>
        <router-link :to="{name:'list'}">列表</router-link>
        <router-link :to="{name:'main',params:{uid:1029},query:{address:'遵义'}}">个人中心</router-link>
    </div>

    <template id="home">
        <div>
            <h2>home-home-home</h2>
        </div>
    </template>

    <template id="list">
        <div>
            <h2>list-list-list</h2>
            <button @click='$router.back()'>返回上一级</button>
            <button @click='gotopage'>进入佐助的主页</button>
            <div>
                <p @click='gotodetail(l,i)' v-for="(l,i) in songs" :key='i' >
                    {{l.name}} 
                </p>
            </div>
        </div>
    </template>

    <template id="main">
        <div>
            <h2>main-main-main</h2>
            <p>uid----{{$route.params.uid}}</p>
            <!-- route是获取路由信息的 -->
            <!-- router是负责路由跳转的 -->
            <p>address----{{$route.query.address}}</p>
        </div>
    </template>

    <template id="detail">
        <div>
            <h2>detail-detail-歌曲详情</h2>
            <!-- 这里是route不是router -->
            <h2>标题:{{$route.query.name}}</h2>
            <!-- 这里的图片是变化的所以需要在前面加上: -->
            <img :src="$route.query.coverImgUrl" alt="">
        </div>
    </template>




    <script>

        // 创建路由组件
        const Home = {
            template: '#home',
        }
        const Detail={
            template:'#detail'
        }
        const List = {
            template: '#list',
            // mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情 （dom渲染完成 组件挂载完成 ）

            // methods中一般都是定义的需要事件触发的一些函数。每次只要触发事件，就会执行对应的方法。

            // 如果把computed中的方法写到method中会浪费性能。computed必须返回一个值页面绑定的才能取得值，

            // 而methods中可以只执行逻辑代码，可以有返回值，也可以没有。
            methods: {
                gotopage(){
                    // this.router==router
                    this.$router.push({name:'main',params:{uid:'20201029'},query:{address:'遵义'}})
                },
                gotodetail(item,index){
                    this.$router.push({name:'detail',query:{...item}})
                    // 当导航到不同url，可以使用this.$router.push方法，这个方法则会向history里面添加一条记录，当点击浏览器回退按钮或者this.$router.back()就会回退之前的url。
                    //this.$route相当于当前激活的路由对象，包含当前url解析得到的数据，可以从对象里获取一些数据，如name,path等
                }
            },
            data() {
                return {
                    // 设置songs接收下面ajax传回的值
                    songs: [],
                };
            },
            mounted() {
                $.ajax({
                    type:'get',
                    url:'http://47.104.209.44:3333/top/playlist/highquality',
                    dataType:'json',
                    success:res=>{
                        console.log(res);
                        this.songs=res.playlists;
                    }
                })
            },
            
        }
        const Main = {
            template: '#main'
        }
        // 定义路由组件
        const routes = [
            {
                path: '/',
                redirect: {
                    name:'home' 
                }
            },
            {
                path: '/home',
                component: Home,
                name: 'home'
            },
            {
                path: '/list',
                component: List,
                name: 'list'
            },
            {
                path:'/detail',
                component:Detail,
                name:'detail'
            },
            {
                path: '/main',
                component: Main,
                name: 'main'
            },
            {
                path:'/404',
                name:'notFound',
                component:{
                    template:'<h1>404-404-Not Found</h1>'
                }
            },
            {
                path:'*',
                redirect:"/404"
            }
        ];
        //创建路由
        const router = new VueRouter({
            routes,
            base: '',
            mode: 'hash',
            // mode是设置路由模式    
            // 如果是history就不能刷新页面 刷新就无法找到
        });

        const vm = new Vue({
            router,
            data: {

                title: '路由跳转',

            },
        }).$mount('#app');
    </script>
    <!--  
       嵌套路由
       有多少层嵌套就写多少个 children  每一层嵌套都必须对应有一个 router-view 
 
        路由跳转

        1. 声明式  html跳转  router-link   to
        2. 编程式  javascript 跳转   函数代码跳转  this.$router  router 
        // 字符串
        router.push('home')
        // 对象
        router.push({ path: 'home' })
        // 命名的路由
        router.push({ name: 'user', params: { userId: '123' }})
        // 带查询参数，变成 /register?plan=private
        router.push({ path: 'register', query: { plan: 'private' }})

        router == this.$router  路由实例对象 进行路由跳转 还可以监听路由切换 
        $route == this.$route   路由对象属性  (params query name)

        router.go(1)
        router.goforward();    前进
        router.go(-1);       后退 
        router.back()  
     -->
</body>

</html>